/*
 * @Author: youngyangchen
 * @Date: 2022-01-16 23:12:01
 * @LastEditTime: 2022-02-05 19:57:41
 * @LastEditors: youngyangchen
 * @Description: webpack 基础配置 
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require("vue-loader");


const srcPath = path.resolve('examples');

module.exports = {
  mode: 'development',
  entry: srcPath + '/src/main.ts',
  output: {
    path: path.resolve('dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      // 安装、编译vue文件需要的包  sudo pnpm i vue@next vue-loader@next @vue/compiler-sfc -D
      { test: /\.vue$/, use: 'vue-loader' },
      // 解析ts、es6+语法 pnpm i  babel-loader @babel/core @babel/preset-env @babel/preset-typescript @babel/plugin-transform-runtime  -D
      {
        test: /\.(t|j)s$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    "useBuiltIns": "usage",
                    "corejs": 3,
                    "targets": {"browsers":["> 1%"]},
                  }
                ],
                ["@babel/preset-typescript"]
              ],
              // plugins:[
              //   ["@babel/plugin-proposal-class-properties", { "loose": true }]
              // ]
            }
          },
        ],
      },
      // 编译scss pnpm install sass-loader sass css-loader style-loader  --save-dev
      {
        test: /\.s[ac]ss$/i,
        use: [
             // 把 CSS 插入到 DOM 中
            'style-loader',
            // css-loader 会对 @import 和 url() 进行处理 将 CSS 转化成 CommonJS 模块 
            'css-loader', 
            // 将 Sass 编译成 CSS
            'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        template: srcPath + '/index.html',
        filename: 'index.html',
        title: 'vue3 + TS -> web App'
    })
  ]
}